<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EPGList: JavaScript Object</title>
	<link rel="stylesheet" href="styles/epg.css">
	<script src="scripts/config.js"></script>
	<script src="scripts/util.js"></script>
	<script src="scripts/demo5.js"></script>
	<!--<script src="scripts/demo5_1.js"></script>-->
	<!--<script src="scripts/demo5_2.js"></script>-->
	<script>
	  function playProgram(program)
	  {
		  alert("Seeking Program..." + program.startTime);
	  }
	  var curIdx = -1;
	  function initUIActions()
	  {
		  document.getElementById("prevProgram").onclick = function ()
		  {
			  if (curIdx >= 0)
			  {
				  epgList.setActiveProgram(--curIdx);
			  }
		  };
		  document.getElementById("nextProgram").onclick = function ()
		  {
			  if (curIdx <= epgList.getProgramLength() - 1)
			  {
				  epgList.setActiveProgram(++curIdx);
			  }
		  };
	  }
	</script>
	<script>
		var epgList;
	  window.onload = function ()
	  {
		  epgList = new EPGList("epgContainer", {
		    epgFeed: EPG_FEED,
		    onPlayCallback: playProgram
	    });
	    initUIActions();
	  }
	</script>
</head>
<body>
<input type="button" value="&lt" id="prevProgram"/>
<input type="button" value="&gt" id="nextProgram"/>
<div id="epgContainer">
	<!--
	<ul>
		<li class="item">
			<div class="title">Brazilian League 2017: CORINTHIANS v FLAMENGO</div>
			<a href="javascript:void(0);">Play</a>
		</li>
	</ul>
	-->
</div>
</body>
</html>